/* ########################################################## */
/* ################ FLEXBOX ATTRIBUTE SYSTEM ################ */
/* ########################################################## */
/* this section was inspired by the Google Polymer layout attribute system */

/* two snippets of code from: http://css-tricks.com/using-flexbox/ used for iphone compatibility */

/* ######### flex direction ######### */

[flex-vertical],
[flex-horizontal] {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;
}

[flex-vertical] {
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
}

[flex-horizontal] {
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
}

[flex-horizontal]:not([flex-fill]):not([align-top]):not([align-center]):not([align-bottom]),
[flex-vertical]:not([flex-fill]):not([align-top]):not([align-center]):not([align-bottom]) {
    align-items: center;
    -ms-align-items: center;
    -webkit-align-items: center;
}

/* ######### alignment ######### */

[align-top] {
    align-items: flex-start;
    -webkit-align-items: flex-start;
    -ms-align-items: flex-start;
}

[align-center] {
    align-items: center;
    -ms-align-items: center;
    -webkit-align-items: center;
}

[align-bottom] {
    align-items: flex-end;
    -ms-align-items: flex-end;
    -webkit-align-items: flex-end;
}

/* ######### wrapping ######### */

[wrap] {
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

[wrap-reverse] {
    flex-wrap: wrap-reverse;
    -ms-flex-wrap: wrap-reverse;
    -webkit-flex-wrap: wrap-reverse;
}

/* ######### justification ######### */

[justify-start] {
    justify-content: flex-start;
    -ms-justify-content: flex-start;
    -webkit-justify-content: flex-start;
}

[justify-end] {
    justify-content: flex-end;
    -ms-justify-content: flex-end;
    -webkit-justify-content: flex-end;
}

[justify-center] {
    justify-content: center;
    -ms-justify-content: center;
    -webkit-justify-content: center;
}

[justify-space-between] {
    justify-content: space-between;
    -ms-justify-content: space-between;
    -webkit-justify-content: space-between;
}

[justify-space-around] {
    justify-content: space-around;
    -ms-justify-content: space-around;
    -webkit-justify-content: space-around;
}

/* ######### center ######### */

[flex-center] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    align-items: center;
    -ms-align-items: center;
    -webkit-align-items: center;
    
    justify-content: center;
    -ms-justify-content: center;
    -webkit-justify-content: center;
}


/* ######### variable width element ######### */

[flex] {
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;    /* OLD - Firefox 19- */
    width: 100%;         /* For old syntax, otherwise collapses. */
    -webkit-flex: 1;     /* Chrome */
    -ms-flex: 1;         /* IE 10 */
    flex: 1;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    
    flex-basis: auto;
        /* Allows variable height flexed elements to grow or shrink
                depending on content. This fixed the height issue for
                the gs-folder. Before, the two lists (files, folders)
                would increase the height of the gs-folder correctly
                (the gs-folder height is the some of the heights of
                the file and folder lists). However, the height wasn't
                distributed correctly between the two lists. The taller
                one would be made shorter and the shorter one would
                be made taller. */
}

/*
[flex-vertical] > *:not([flex]),
[flex-horizontal] > *:not([flex]) {
    align-self: flex-start;
    webkit-align-self: flex-start;
    -ms-align-self: flex-start;
}*/


/* ########################################################### */
/* ###################### VISUAL STYLES ###################### */
/* ########################################################### */

*:focus {
    /* this is a default that but each element is allow to have its own setting of this particular property */
    /*outline-offset: -1px;*/
    /*background-color: #FFFDEC;*/
    /*outline: dashed 1px #FFB000;*/
    
    -webkit-appearance: none;
    -moz-appearance: none;
    
    outline: none;
    background: none;
}

*[selected] {
    background-color: #E3F5FF !important; /* F1FAFF, B3E4FF, FFFFCC */
}

*[selected-secondary] {
    background-color: #E3F5FF !important; /* F1FAFF, B3E4FF, FFFFEE */
}

*[tempselect] {
    background-color: #E7F2FF !important;
}

html body *[disabled],
*[disabled] {
    opacity: 0.6;
    pointer-events: none;
    cursor: default;
    
    /*
    background-color: #D5D5D5;
    color: #444444;
    */
}


/* ########################################################### */
/* ##################### HIDDEN POLYFILL ##################### */
/* ########################################################### */

*[hidden] {
    display: none !important;
}


/* ############################################################ */
/* ###################### TEXT SELECTION ###################### */
/* ############################################################ */

*[prevent-text-selection], *[no-text-selection] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

*[allow-text-selection] {
    -webkit-touch-callout: initial;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
    user-select: text;
}


/* ########################################################### */
/* ######################## HINT TEXT ######################## */
/* ########################################################### */

.hint {
    color: #AAAAAA;
    font-size: 0.7em;
}


/* ############################################################ */
/* ############## HIDDEN/SHOWN DEPENDING ON SIZE ############## */
/* ############################################################ */

/* desktop */
@media only screen and (max-width: 5000px) and (min-width: 769px) {
    *[hide-on-desktop],
    *[show-on-tablet],
    *[show-on-phone] {
        display: none !important;
    }
}

/* tablet */
@media only screen and (max-width: 768px) and (min-width: 321px) {
    *[hide-on-tablet],
    *[show-on-desktop],
    *[show-on-phone] {
        display: none !important;
    }
}

/* phone */
@media only screen and (max-width: 321px) {
    *[hide-on-phone],
    *[show-on-desktop],
    *[show-on-tablet] {
        display: none !important;
    }
}

/* ############################################################ */
/* ############## HIDDEN/SHOWN DEPENDING ON SIZE ############## */
/* ############################################################ */

/* less than small */
@media only screen and (max-width: 768px) {
    *[hide-xs],
    *[hide-xs],
    *[show-sml],
    *[show-small],
    *[show-med],
    *[show-medium],
    *[show-lrg],
    *[show-large] {
        display: none !important;
    }
}

/* small */
@media only screen and (max-width: 992px) and (min-width: 768px) {
    *[show-xs],
    *[show-xs],
    *[hide-sml],
    *[hide-small],
    *[show-med],
    *[show-medium],
    *[show-lrg],
    *[show-large] {
        display: none !important;
    }
}

/* medium */
@media only screen and (max-width: 1200px) and (min-width: 992px) {
    *[show-xs],
    *[show-xs],
    *[show-sml],
    *[show-small],
    *[hide-med],
    *[hide-medium],
    *[show-lrg],
    *[show-large] {
        display: none !important;
    }
}

/* large */
@media only screen and (min-width: 1200px) {
    *[show-xs],
    *[show-xs],
    *[show-sml],
    *[show-small],
    *[show-med],
    *[show-medium],
    *[hide-lrg],
    *[hide-large] {
        display: none !important;
    }
}

[remove-margin-top]         { margin-top: 0; }
[remove-margin-bottom]      { margin-bottom: 0; }
[remove-margin-left]        { margin-left: 0; }
[remove-margin-right]       { margin-right: 0; }
[remove-margin-horizontal]  { margin-left: 0; margin-right: 0; }
[remove-margin-vertical]    { margin-top: 0; margin-bottom: 0; }
[remove-margin-all]         { margin: 0; }

/*
768px
hide-sml (from sml to med)
hide-small

992px
hide-med (from med to lrg)
hide-medium

1200px
hide-lrg (from lrg and larger)
hide-large
*/

